<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/flexible.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="./jquery.js"></script>
    <style>
        .box {
            width: 7.5rem;
            height: 5rem;
        }
    </style>
</head>

<body>
    <!-- http://datav.aliyun.com/tools/atlas/index.html#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5 -->

    <div style="width: 600px;height:400px;border:1px solid red" id='box'></div>
    <script>

        const MyEcharts = echarts.init(document.getElementById('box'))
        $.get('http://192.168.1.4:8000//china.json', function (res) {
            echarts.registerMap('chinaMap', res)
            const airData = [
                { name: '北京', value: 39.92 },
                { name: '天津', value: 39.13 },
                { name: '上海', value: 31.22 },
                { name: '重庆', value: 66 },
                { name: '河北', value: 147 },
                { name: '河南', value: 113 },
                { name: '云南', value: 25.04 },
                { name: '辽宁', value: 50 },
                { name: '黑龙江', value: 114 },
                { name: '湖南', value: 175 },
                { name: '安徽', value: 117 },
                { name: '山东', value: 92 },
                { name: '新疆', value: 84 },
                { name: '江苏', value: 67 },
                { name: '浙江', value: 84 },
                { name: '江西', value: 96 },
                { name: '湖北', value: 273 },
                { name: '广西', value: 59 },
                { name: '甘肃', value: 99 },
                { name: '山西', value: 39 },
                { name: '内蒙古', value: 58 },
                { name: '陕西', value: 61 },
                { name: '吉林', value: 51 },
                { name: '福建', value: 29 },
                { name: '贵州', value: 71 },
                { name: '广东', value: 38 },
                { name: '青海', value: 57 },
                { name: '西藏', value: 24 },
                { name: '四川', value: 58 },
                { name: '宁夏', value: 52 },
                { name: '海南', value: 54 },
                { name: '台湾', value: 88 },
                { name: '香港', value: 66 },
                { name: '澳门', value: 77 },
                { name: '南海诸岛', value: 55 }]
            var scatterData = [
                {
                    value: [117.283042, 31.86119]
                }
            ]
            const option = {
                geo: {
                    type: 'map',
                    map: 'chinaMap',
                    roam: true, //允许拖拽
                    label: {
                        show: true //显示地点名称
                    },
                    zoom: 2, //设置初始化的缩放比例
                    // center: [87.617733, 43.764565], //设置地图中心点
                },
                series: [
                    {
                        data: airData,
                        geoIndex: 0,
                        type: 'map',
                        label: {
                            show: true //显示地点名称
                        },
                    },
                    {
                        data: scatterData, // 配置散点的坐标数据
                        type: 'effectScatter',
                        coordinateSystem: 'geo', // 指明散点使用的坐标系统  geo的坐标系统
                        rippleEffect: {
                            scale: 10 // 设置涟漪动画的缩放比例
                        }
                    },
                ],

                visualMap: {
                    min: 0, // 最小值
                    max: 300, // 最大值
                    inRange: {
                        color: ['white', 'red'] // 颜色的范围
                    },
                    calculable: true // 出现滑块
                }
            }
            MyEcharts.setOption(option)
        })
    </script>


    </script>
</body>

</html>

</html>